<template>
  <div class="view-wrapper">
      <div class="head">
        <div class="title">冠军竞猜活动配置</div>
        <div class="status">
          <div class="bt">活动状态：{{statusData.statusStr}}</div>
          <div style="width: 100%">
            <el-row>
              <el-col :span="10">
                  <el-button type="primary" size="mini" @click="handleasof()" v-if="statusData.status == 1 ">截止下注</el-button>
                  <el-button type="primary" size="mini" @click="handleBet()" v-if="statusData.status == 2">恢复下注</el-button>
                  <el-button type="primary" size="mini" @click="handleReward()" v-if="statusData.status == 3">发放奖励</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="70px">
          <el-form-item label="投注对象" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入投注对象名称" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
     
      <div class="listBox">
        <div style="margin-bottom: 14px" class="topBtn">
          <div>
            <el-button type="primary" @click="handleAdd">新增投注对象</el-button>
          </div>
          <div style="margin-left:14px">
            <export-excel-button
              title="冠军竞猜活动配置列表"
              action="/guess/activity/champion/export"
              :params="ExportParams"
            />
          </div>
          <div>
            <el-upload style="margin-left:14px" class="upload-demo" :action="fileaction" :headers="headers" :data="fileData" :limit="1"
              :on-success="handleFileChange" :show-file-list="true" :file-list="fileList">
              <el-button type="primary" >导入数据</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>
          
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="头像" align="center" prop="icon" :show-overflow-tooltip="true">
             <template slot-scope="scope">
               <div class="imgBox">
                  <img :src="scope.row.icon" alt="" v-if="scope.row.icon != '-'">
                  <span v-else>--</span>
               </div>
            </template>
          </el-table-column>
          <el-table-column label="投注对象" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="赔率" align="center" prop="odds" :show-overflow-tooltip="true" />
          <el-table-column label="投注人数" align="center" prop="betNum" :show-overflow-tooltip="true" />
          <el-table-column label="投注积分" align="center" prop="betAmount" :show-overflow-tooltip="true" />
          <el-table-column label="结果" align="center" prop="statusStr" :show-overflow-tooltip="true" />
          <el-table-column label="预计发放积分" align="center" prop="issueAmount" :show-overflow-tooltip="true" />
        
          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleWin(scope.row)" v-if="scope.row.status == 1 && statusData.status != 1 && statusData.status != 4">
                取消  </el-button>
              <el-button size="mini" type="text" @click="handleWin(scope.row)" v-if="scope.row.status != 1 && statusData.status != 1 && statusData.status != 4">
                胜出</el-button> 
              <el-button size="mini" type="text" @click="handleEdit(scope.row)">
                编辑  </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />

    </div>
    <add-betting
      ref="childRef"
      v-if="addBetting"
      :id="id"
      :guessActivityId="queryParams.guessActivityId"
      :pathType="pathType"
      :visible.sync="addBetting"
      @success="_handleSuccess" 
    />
    <!-- <add-score
      ref="childRef"
      v-if="addScore"
      :id="queryParams.activityId"
      :pathType="pathType"
      :visible.sync="addScore"
      @success="_handleSuccess" 
    />  -->
    <add-bet
      ref="childRef"
      v-if="addBet"
      :guessActivityId="queryParams.guessActivityId"
      :pathType="pathType"
      :visible.sync="addBet"
      @success="_handleSuccess" 
    />
  </div>
  
</template>

<script>
  import {
    adminDict,
    championList,
    stopDeadlineDeadline,
    getChampionStatus,
    win,
    cancelWin,
    championAmount,
  } from "@/api/blindBox/quizConfigTwo";
  import addBetting from './components/addBetting' 
  // import addScore from './components/addScore' 
  import addBet from './components/addBet' 
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import { getToken } from "@/utils/auth";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
      addBetting,
      // addScore,
      addBet
    },
    data() {
      return {
        id: '',
        pathType: 'add',
        addBetting: false,
        addScore: false, 
        addBet: false,
        statusData: {},
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          guessActivityId: '',//竞猜活动id
          name: '',//	投注对象
        },
        //导入需要的参数
        fileData: {
            guessActivityId: '',
        },
        fileList: [],
        fileaction: process.env.VUE_APP_BASE_API + "/guess/activity/champion/import",
        headers: {
          "X-Access-Token": getToken(),
        }, //设置上传文件请求头
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.queryParams.guessActivityId = this.$route.query.guessActivityId
      this.fileData.guessActivityId = this.$route.query.guessActivityId
      
      this.getStatus()
      this.getList();
    },
    methods: {
      //获取赛事状态
      getStatus(){
        var id = this.queryParams.guessActivityId
        getChampionStatus(id).then(res => {
          this.statusData = res.result
        })
      },
      /** 查询会员列表列表 */
      getList() {
        this.loading = true;
        championList(this.queryParams).then(response => {
          this.total = response.result.total
          this.customerList = response.result.records
          this.customerList = this.customerList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '-'
              }
            })
            return item
          })
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      /** 详情按钮操作 */
      handleView(row,type) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/Prepaid-details",
          query: {
            id: row.id,
            type: type
          },
        })
      },
      //推荐用户列表
      handleRecommended(row) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/recommended-list",
          query: {
            id: row.id,
          },
        })
      },
       //coin详情
       handleCoin(row) {
        this.$router.push({
          path: "/members/coin-detail",
          query: {
            id: row.id,
          },
        })
      },
      //新增活动
      handleAdd(){
        this.addBetting = true
        this.pathType = 'add'
      },
      //编辑活动
      handleEdit(row){
        this.addBetting = true
        this.pathType = 'edit'
        this.id = row.id
      },
      //胜出
      handleWin(row){
        if(row.status == 1){
          //取消
          var title = '是否取消胜出'
        }else{
          // 胜出
          var title = '是否胜出'
        }
        this.$confirm(title, '截止下注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id = row.id
          if(row.status == 1){
            cancelWin(id).then(res => {
              this.$message.success('操作成功');
              this.getStatus()
              this.getList();
            })
          }else if(row.status != 1){
            win(id).then(res => {
              this.$message.success('操作成功');
              this.getStatus()
              this.getList();
            })
          }
         
        }).catch(() => {});
      },
      //修改比分
      editScore(){
        this.addScore = true
      },
      //截止下注
      handleasof(){
        this.$confirm('是否确定截止下注', '截止下注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id = this.queryParams.guessActivityId
          stopDeadlineDeadline(id).then(res => {
            this.$message.success('操作成功');
            this.getStatus()
          })
        }).catch(() => {});
      },
      //发放奖励
      handleReward(){
        this.$confirm(`是否确认发放${this.statusData.issueAmount}CoCo奖励发放后无法撤回，请谨慎操作`, '发放奖励', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id = this.queryParams.guessActivityId
          championAmount(id).then(res => {
            this.$message.success('操作成功');
            this.getStatus()
          })
        }).catch(() => {});
      },
      //恢复下注
      handleBet(){
        this.addBet = true
      },
      _handleSuccess(data) {
        console.log("data", data);
        this.queryParams.pageNum = 1
        this.getList();
        this.getStatus()
      },
      //导入文件
      handleFileChange(res, file) {
        console.log('文件', res, file)
        if (res.code == 200) {
          this.$message.success('导入成功');
          this.getList();
        } else {
          this.$message.error(res.message);
          
        }
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
    .title{
      font-size: 20px;
      color: #333;
      font-weight: 700;
      margin-bottom: 14px;
    }
    .status{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 20px 0;
      .bt{
        font-size: 20px;
        color: #333;
        font-weight: 700;
        width: 250px;
      }
    }
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .topBtn{
    display: flex;
    justify-content: flex-start;
  }
   .imgBox{
    img{
      width: 60px;
      height: 60px;
    }
  }
</style>
